<template>
  <div class="Interest">
    <InterestVideo :VideoList="VideoList"/>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Interest",
});

</script>

<script lang="ts" setup>
import InterestVideo from "@/views/index/Interest/InterestVideo/index.vue";
import {onMounted, ref} from "vue";
import {reqGetVideoAsync} from "@/api/home";
import {ElMessage} from "element-plus";
// 视频数据
const VideoList = ref<any>([])
// 页数
const pageNum = ref<number>(0)
// 条数
const pageSize = ref<number>(10)
// 获取首页推荐下的视频
const getVideo = async (pageNum:number,pageSize:number = 5)=>{
  try {
    const re = await reqGetVideoAsync(pageNum,pageSize)
    VideoList.value = re.data.content
  }catch (e) {
    ElMessage.error('获取视频失败')
  }
}
onMounted(()=>{
  getVideo(pageNum.value,pageSize.value)
})
</script>

<style lang="scss" scoped>
.Interest {
  width: 100%;
  margin: 0 auto;
  background-color: #f4f4f4;
}
</style>
